<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>待付款</title>
		<link type="text/css" rel="stylesheet" href="../../../css/index.css" />
		<link type="text/css" rel="stylesheet" href="../../../layui/css/layui.css" />
		<link type="text/css" rel="stylesheet" href="../../../css/manage/order.css" />
		<link type="text/css" rel="stylesheet" href="../../../css/manage/obligation.css" />
	</head>
	<body>
		<header></header>
		<div id="menu"></div>
		<div class="content">
			<div class="content-title">
				<ul class="clearfix">
					<li>订单管理</li>
					<li>订单列表</li>
					<li>待付款</li>
				</ul>
			</div>
			<div class="contentBox clearfix">
				<div class="orderStep">
					<ul class="clearfix">
						<li>
							<span class="step1">1</span>
							<span class="font14 color333">提交订单</span>
							<span class="font12 color999">2018-10-14 16:32</span>
						</li>
						<i></i>
						<li>
							<span class="step1">2</span>
							<span class="font14 color333">支付订单</span>
							<span class="font12 color999">2018-10-14 16:32</span>
						</li>
						<i></i>
						<li>
							<span class="step1">3</span>
							<span class="font14 color333">平台发货</span>
							<span class="font12 color999">2018-10-14 16:32</span>
						</li>
						<i></i>
						<li>
							<span class="step1">4</span>
							<span class="font14 color333">确认收货</span>
							<span class="font12 color999">2018-10-14 16:32</span>
						</li>
					</ul>
				</div>
				<div class="btnList">
					<input type="button" class="btn" id="modifyInfo" value="修改收货人信息">
					<input type="button" class="btn" id="closeOrder" value="关闭订单">
				</div>
				<div class="orderInfo clearfix">
					<div class="baseInfo">
						<span class="">基本信息</span>
						<form class="layui-form">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">订单编号：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input orderNum" readonly="readonly">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">发货单流水号：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input sendNum" readonly="readonly">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">支付方式：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input paymentMode" readonly="readonly">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">配送方式：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input ship" readonly="readonly">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">物流单号：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input orderNum" readonly="readonly">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">自动确认收货时间：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input sendNum" readonly="readonly">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">订单可用乐币：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input paymentMode" readonly="readonly">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">活动信息：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input ship" readonly="readonly">
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="receiverInfo">
						<span class="">收货人信息</span>
						<form class="layui-form">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">收货人：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input orderNum" readonly="readonly">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">联系方式：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input sendNum" readonly="readonly">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">邮政编码：</label>
									<div class="layui-input-inline">
										<input type="text" name="" value="11"  autocomplete="off" class="layui-input paymentMode" readonly="readonly">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
									<label class="layui-form-label">收货地址：</label>
									<div class="layui-input-block">
										<input type="text" name="" value="北京市朝阳区建外SOHO12号楼903"  autocomplete="off" class="layui-input ship" readonly="readonly">
									</div>
							</div>
						</form>
				</div>
				<div class="storeInfo">
					<span class="">商品信息</span>
					<div class="storeList">
						<ul>
							<li class="clearfix">
								<div class="storeImg">
									<img src="" />
									<span>银色星芒刺绣牛仔衣银色星芒刺绣牛仔衣</span>
								</div>
								<div class="storeDescribe">
									<ul>
										<li><span>货号：</span><span>No988329</span></li>
										<li><span>尺寸：</span><span>S</span></li>
										<li><span>颜色：</span><span>黑色</span></li>
										<li><span>价格：</span><span>￥198</span></li>
										<li><span>数量：</span><span>1</span></li>
										<li><span>库存：</span><span>1</span></li>
										<li><span>小计：</span><span>￥198</span></li>
									</ul>
								</div>
							</li>
							<li class="clearfix">
								<div class="storeImg">
									<img src="" />
									<span>银色星芒刺绣牛仔衣银色星芒刺绣牛仔衣</span>
								</div>
								<div class="storeDescribe">
									<ul>
										<li><span>货号：</span><span>No988329</span></li>
										<li><span>尺寸：</span><span>S</span></li>
										<li><span>颜色：</span><span>黑色</span></li>
										<li><span>价格：</span><span>￥198</span></li>
										<li><span>数量：</span><span>1</span></li>
										<li><span>库存：</span><span>1</span></li>
										<li><span>小计：</span><span>￥198</span></li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
					<div class="storeInfoCount">合计：<span>¥ 398.5</span></div>
				</div>
				<div class="logistics">
					<span class="">填写物流信息</span>
					<form class="layui-form">
						 <div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">配送方式：</label>
								<div class="layui-input-block">
									<select name="interest" lay-filter="aihao">
										<option value=""></option>
										<option value="0">快递</option>
										<option value="1" selected="">EMS</option>
										<option value="2">平邮</option>
									</select>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">物流公司：</label>
								<div class="layui-input-block">
									<select name="interest" lay-filter="aihao">
										<option value=""></option>
										<option value="0">快递</option>
										<option value="1" selected="">EMS</option>
										<option value="2">平邮</option>
									</select>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">运单号：</label>
								<div class="layui-input-block">
									<input type="text" placeholder="" class="layui-input" />
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">发布时间：</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
								</div>
							</div>
							<div class="layui-inline logisticsStatus">
								<label class="layui-form-label">物流状态：</label>
								<div class="layui-input-inline clearfix">
									<input type="text" value="待发货" class="layui-input fl" />
									<input type="button" value="立即发货" class="fl" />
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
<div class="sendGoods">
		<!-- <span class="">填写物流信息</span> -->
		<form class="">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"><span style="color:red;">*</span>收货人姓名：</label>
					<div class="layui-input-block">
						<input type="text" placeholder="请输入收货人姓名" class="layui-input" />
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"><span style="color:red;">*</span>手机号码：</label>
					<div class="layui-input-block">
						<input type="tel" placeholder="请输入手机号码" class="layui-input" />
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"><span style="color:red;">*</span>邮政编码：</label>
					<div class="layui-input-block">
						<input type="text" placeholder="请输入邮政编码" class="layui-input" />
					</div>
				</div>
			</div>
			<div class=" publishTime">
				<div class="">
					<label class="layui-form-label"><span style="color:red;">*</span>所在区域：</label>
					<div data-toggle="distpicker" class="layui-input-block">
						<div class="form-group">
							<label class="sr-only" for="province1">Province</label>
							<select class="form-control" id="province1"></select>
						</div>
						<div class="form-group">
							<label class="sr-only" for="city1">City</label>
							<select class="form-control" id="city1"></select>
						</div>
						<div class="form-group">
							<label class="sr-only" for="district1">District</label>
							<select class="form-control" id="district1"></select>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"><span style="color:red;">*</span>详细地址：</label>
					<div class="layui-input-block clearfix">
						<textarea type="text" rows="10"  class="layui-input fl"  readonly="readonly"></textarea>
					</div>
				</div>
			</div>
		</form>
		<div class="layui-form-item">
			<div class="layui-inline">
				<div class="layui-input-inline clearfix btnList">
					<input type="submit" data-type="save" id="" value="确定" class="layui-btn fl delivery" />
					<input type="button" data-type="reset" id="" value="取消" class="layui-btn fl delivery reset" />
				</div>
			</div>
		</div>
	</div>
	<div id="closeOrderReason">
		<div >
			<label class="layui-form-label"><span style="color:red;">*</span>操作备注：</label>
			<div class="layui-input-block clearfix">
				<textarea type="text"   class="layui-input fl"  readonly="readonly"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<div class="layui-input-inline clearfix btnList">
					<input type="submit" data-type="save" id="" value="确定" class="layui-btn fl delivery" />
					<input type="button" data-type="reset" id="" value="取消" class="layui-btn fl delivery reset" />
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/html" id="barDemo">
						<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
            {{# if(d.edit=="0"){ }}
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除订单</a>
            {{# } else if(d.edit=="1"){}}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="jiechu">关闭订单</a>
            {{# } }}           
	</script>
	<script src="../../../js/plugIn/jquery-3.3.1.min.js"></script>
	<script src="../../../layui/layui.all.js"></script>
	<script src="../../../plugin/citySelect/distpicker.data.js"></script>
	<script src="../../../plugin/citySelect/distpicker.js"></script>
	<script>
		var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
		var table = layui.table;
		var laydate = layui.laydate;
		
		var menuList = "dingdanguanli";
		var menuSec = "dingdanliebiao";
		$('header').load('../home.html')
		$('#menu').load('../menu.html');
		var arr = GetRequest();
		if(arr.status=="待付款"){
			$('.step1').eq(0).addClass("active");
			$('.orderStep ul i').eq(0).addClass('active');
			$('.step1').eq(1).addClass("step2");
		}else if(arr.status=="待发货"){
			$('.step1:lt(2)').addClass("active");
			$('.orderStep ul i:lt(2)').addClass('active');
			$('.step1').eq(2).addClass("step2");
		}else if(arr.status=="已完成"){
			$('.step1:lt(3)').addClass("active");
			$('.orderStep ul i:lt(3)').addClass('active');
			$('.step1').eq(3).addClass("step2");
		}else if(arr.status=="已关闭"){
			$('.step1').addClass("active");
			$('.orderStep ul i').addClass('active');
		}
			
		function GetRequest() {   
			 var url = location.search; //获取url中"?"符后的字串   
			 var theRequest = new Object();   
			 if (url.indexOf("?") != -1) {   
					var str = url.substr(1);   
					strs = str.split("&");   
					for(var i = 0; i < strs.length; i ++) {   
						 theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);   
					}   
			 }   
			 return theRequest;   
		}   
		
		//监听导航点击
		element.on('nav(demo)', function(elem){
			layer.msg(elem.text());
		});
		//日期时间选择器
		laydate.render({
			elem: '#test5'
			,type: 'datetime'
		});
		//展示已知数据
  table.render({
    elem: '#orderList'
    ,cols: [[ ,//标题栏
				{type: 'checkbox'}
      ,{field: 'id', title: 'ID'}
      ,{field: 'username', title: '用户名' }
      ,{field: 'email', title: '邮箱'}
      ,{field: 'sign', title: '签名'}
      ,{field: 'sex', title: '性别' }
      ,{field: 'city', title: '城市'}
      ,{field: 'experience', title: '积分'},
			,{toolbar:'#barDemo',title: '操作',width:160}
    ]]
    ,data: [{
      "id": "10001"
      ,"username": "杜甫"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "116"
      ,"ip": "192.168.0.8"
      ,"logins": "108"
      ,"joinTime": "2016-10-14"
			,"edit":"0"
    }, {
      "id": "10002"
      ,"username": "李白"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "12"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
      ,"LAY_CHECKED": true
			,"edit":"0"
    }, {
      "id": "10003"
      ,"username": "王勃"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "65"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
			,"edit":"1"
    }, {
      "id": "10004"
      ,"username": "贤心"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "666"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
			,"edit":"0"
    }, {
      "id": "10005"
      ,"username": "贤心"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "86"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
			,"edit":"0"
    }, {
      "id": "10006"
      ,"username": "贤心"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "12"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
			,"edit":"1"
    }]
    //,skin: 'line' //表格风格
		,done:function(res, curr, count){//数据,页码,数据总量
			
		}
    ,even: true
    ,page: true //是否显示分页
    ,limits: [5, 10, 15]
    ,limit: 10 //每页默认显示的数量
  });
		//监听表格复选框选择
		table.on('checkbox(demo)', function(obj){
			console.log(obj)
		});
		//监听工具条
		table.on('tool(demo)', function(obj){
			var data = obj.data;
			if(obj.event === 'detail'){
				layer.msg('ID：'+ data.id + ' 的查看操作');
			} else if(obj.event === 'del'){
				layer.confirm('真的删除行么', function(index){
					obj.del();
					layer.close(index);
				});
			} else if(obj.event === 'edit'){
				layer.alert('编辑行：<br>'+ JSON.stringify(data))
			}
		});
		var $ = layui.$, active = {
			getCheckData: function(){ //获取选中数据
				var checkStatus = table.checkStatus('idTest')
				,data = checkStatus.data;
				layer.alert(JSON.stringify(data));
			}
			,getCheckLength: function(){ //获取选中数目
				var checkStatus = table.checkStatus('idTest')
				,data = checkStatus.data;
				layer.msg('选中了：'+ data.length + ' 个');
			}
			,isAll: function(){ //验证是否全选
				var checkStatus = table.checkStatus('idTest');
				layer.msg(checkStatus.isAll ? '全选': '未全选')
			}
		};
		$('.demoTable .layui-btn').on('click', function(){
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		$("#modifyInfo").click(function(){
			layer.open({
										type: 1,
										title:'修改收货人地址信息',
										content: $('.sendGoods'),
										area: ['550px', '450px'], //宽高
										cancel: function(){ 
												$('.sendGoods').css('display','none');
											}
									})
		})
		$("#closeOrder").click(function(){
			layer.open({
				type:1,
				title:'关闭订单',
				content:$('#closeOrderReason'),
				area: ['550px', '380px'], //宽高
				cancel: function(){ 
						$('#closeOrderReason').css('display','none');
					}
			})
		})
	</script>
</html>